<template>
  <div class="box">
    <div class="left">
      <div
        class="item"
        v-for="item in list"
        :key="item.com"
        :draggable="true"
        @dragstart="dragStart($event, item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div
      class="content"
      @dragover.prevent="dragOverhandler"
      @dragenter.prevent="dragOverhandler"
      @drop="dropHandler"
      style="position: relative"
    >
      <component
        v-for="(item, index) in comList"
        :key="index"
        :is="item.com"
        style="position: absolute"
        :style="{ left: item.l + 'px', top: item.t + 'px' }"
      >
        {{ item.content }}
      </component>
    </div>
  </div>
</template>

<script>
import MyDialog from '@/components/my-dialog.vue' //应用组件
import MySoce from '@/components/my-soce.vue'
export default {
  components: {
    // SlotDemo,
    MyDialog,
    MySoce,
  },
  data() {
    return {
      comName: '',
      comList: [],
      list: [
        {
          label: '按钮',
          com: 'button',
          content: '按钮内容',
        },
        {
          label: '输入框',
          com: 'input',
        },
        {
          label: '文本域',
          com: 'textarea',
        },
        // {
        //   label: '弹层',
        //   com: 'slot-demo',
        // },
        {
          label: '古诗文',
          com: 'my-dialog',
        },
        {
          label: '成绩案例',
          com: 'my-soce',
        },
      ],
    }
  },
  methods: {
    /**
     *
     * @param {DragEvent} e
     * @param {Object} item
     */
    dragStart(e, item) {
      // 可以把item数据保存起来
      e.dataTransfer.setData('info', JSON.stringify(item))
    },
    dragOverhandler(e) {},
    /**
     *
     * @param {DragEvent} e
     */
    dropHandler(e) {
      let info = e.dataTransfer.getData('info')
      info = JSON.parse(info)
      info.l = e.screenX - e.offsetX / 2
      info.t = e.screenY - e.offsetY / 2
      console.log(info)
      this.comList.push(info)
    },
  },
}
</script>

<style scoped>
.box {
  display: flex;
}
.content {
  flex-grow: 1;
}

.left {
  height: 100vh;
  width: 100px;
  border: 1px solid red;
}

.content {
  border: 1px solid red;
  height: 100vh;
}
</style>
